import 'package:flutter/material.dart';
import 'package:flutter_mode/zjw/data_transfer/ReduxUnderScreen.dart';
import 'package:flutter_mode/zjw/data_transfer/ReduxUtil.dart';
import 'package:flutter_redux/flutter_redux.dart';

class ReduxTopScreen extends StatefulWidget {
  @override
  _ReduxTopScreenState createState() => _ReduxTopScreenState();
}

class _ReduxTopScreenState extends State<ReduxTopScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ReduxTopScreen'),
      ),
      body: Center(
        /*  第六步：在子页面中获取Store中的state
        要想获取store我们需要使用StoreConnector<S,ViewModel>。StoreConnector能够通过StoreProvider找到顶层的store。而且能够在state发生变化时rebuilt Widget。
        -首先这里需要强制声明类型，S代表我们需要从store中获取什么类型的state，ViewModel指的是我们使用这个State时的实际类型。
        -然后我们需要声明一个converter<S,ViewModel>，它的作用是将Store转化成实际ViewModel将要使用的信息，比如我们这里实际上要使用的是count，所以这里将count提取出来。
        -builder是我们实际根据state创建Widget的地方，它接收一个上下文context，以及刚才我们转化出来的ViewModel，所以我们就只需要把拿到的count放进Text Widget中进行渲染就好了。
       */
        child: StoreConnector<CountState, int>(
          converter: (store) => store.state.count,
          builder: (context, count) {
            return Text(
              count.toString(),
              style: Theme.of(context).textTheme.bodyLarge,
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context)
              .push(MaterialPageRoute(builder: (BuildContext context) {
            return ReduxUnderScreen();
          }));
        },
        child: Icon(Icons.forward),
      ),
    );
  }
}
